<template lang="">
    <div>
        

                    <van-row>
                        <van-col span="12">
                                <ul>
                                    <li v-for='i in list'>{{i.name}}
                                    <van-button @click='audit(i.id)'>审核</van-button>
                                    </li>
                                </ul>

                                <!-- <van-dialog v-model:show="show" title="标题" show-cancel-button>
                                        <img src="https://img01.yzcdn.cn/vant/apple-3.jpg" />
                                        </van-dialog> -->
                                        
                                <van-dialog v-model:show="show" title="标题" show-cancel-button>
                                    
                                    <van-field :label='描述信息' v-model='descipt'/>
                                <van-radio-group v-model="is_agree">
                                        <van-radio name="2">通过</van-radio>
                                        <van-radio name="3">未通过</van-radio>
                                </van-radio-group>
                                <van-button @click='submit'>提交</van-button> 
                                </van-dialog>

                        </van-col>

                        <van-col span="12">


                                <div id="main" style="width: 600px;height:400px;"></div>

                        </van-col>



                    </van-row>
                        


    </div>
</template>
<script>
import axios from 'axios'
import * as echarts from 'echarts';
export default {
    data(){
        return{
            list:[],
            show:false,
            descipt:'',
            is_agree:2,
            id:0,
        }
    },
    methods: {
        getlist(){
            axios.get('http://localhost:8000/meiduo01/showuseraudit/').then(res=>{
                this.list = res.data.list
            })
        },
        audit(id){
            this.id=id
            this.show=true
        },
        submit(){
            axios.post('http://localhost:8000/meiduo01/audit/',{'id':this.id,'descipt':this.descipt,'is_agree':this.is_agree}).then(res=>{

            })
        },
        openechars(){
            var chartDom = document.getElementById('main');
            var myChart = echarts.init(chartDom);
            var option;

            option = {
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        top: '5%',
                        left: 'center'
                    },
                    series: [
                        {
                        name: 'Access From',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        avoidLabelOverlap: false,
                        itemStyle: {
                            borderRadius: 10,
                            borderColor: '#fff',
                            borderWidth: 2
                        },
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                            show: true,
                            fontSize: '40',
                            fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: [
                            { value: 1048, name: 'Search Engine' },
                            { value: 735, name: 'Direct' },
                            { value: 580, name: 'Email' },
                            { value: 484, name: 'Union Ads' },
                            { value: 300, name: 'Video Ads' }
                        ]
                        }
                    ]
                    };
        }
        
    },
    mounted() {
        this.getlist()
        this.openechars()
    },
}
</script>
<style lang="">
    
</style>